<template>
	<div>
		<h1>{{msg}},学生名称是：{{StudentName}}</h1>
		<!--通过父组件给子组件传递函数类型的props实现:子给父传递数据-->
		<School :getSchoolname="getSchoolname" />
		<!-- $once 只触发一次 -->
		<!--通过父组件给子组件绑定一个自定义事件实现:子给父传通数据(第一个写法 使用@或v-on)-->
		<!-- <Student v-on:setname="getStudentName" @demo="m1" /> -->
		<!--通过父组件给子组件绑定一个自定义事件实现:子给父传递数据（第二种写法，使用ref) -->
		<Student ref="student" @click.native="show"/>
		<!-- native 本来的点击事件 不加当成自定义事件-->
	</div>
</template>

<script>
	import School from "./componebts/School.vue";
	import Student from "./componebts/Student.vue";
	export default {
		name: "App",
		components: {
			Student,
			School
		},
		data() {
			return {
				msg: "App.js",
				StudentName: ""
			};
		},
		methods: {
			getSchoolname(name) {
				console.log("app收到了" + name);
			},
			getStudentName(value, ...params) {
				console.log("app收到了" + value + params);
				this.StudentName = value
			},
			m1() {
				console.log("demo触发了");
			},
			show(){
				alert(1)
			}
		},
		mounted() {
			//this.$refs.student.$on("setname", this.getStudentName);
			// this.$refs.student.$once("setname", this.getStudentName);//$once 只触发一次
		}
		//82
	};
</script>

<style>
</style>
